<template>
  <view class="emojis">
    <view class="emoji-line" v-for="(item, index) in info.emoji" :key="index">
      <view class="emoji-line-item" v-for="(ele, i) in item" :key="i" @click="clickEmoji(ele)">
        {{ ele }}
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  const emit = defineEmits(['emotion'])
  const info = reactive({
    emoji: [
      ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆'],
      ['😉', '😊', '😋', '😎', '😍', '😘', '😗', '🙂'],
      ['🤗', '🤔', '😐', '🙄', '😏', '😥', '😴', '😜'],
      ['😓', '😔', '🙁', '😭', '😰', '😡', '😷', '😇'],
      ['😲', '😤', '😱', '🤡', '👻', '💩', '👀', '😈'],
      ['👽', '🤓', '😇', '🤠', '💀', '😽', '😳', '😬'],
      ['😖', '😤', '🙈', '🙊', '🍌', '🏡', '💣', '🎉'],
      ['🎊', '🎁', '🎈', '💞', '😸', '👄', '👙', '👣'],
      ['💪🏻', '👈🏻', '👉🏻', '☝🏻', '🖕🏻', '✌🏻', '🤙🏻', '👌🏻'],
      ['👍🏻', '👎🏻', '👊🏻', '👋🏻', '👏🏻', '🙌🏻', '🙏🏻', '🤚🏻'],
      ['💔', '💓', '💢', '🤺', '💨', '🐶', '🐮', '🐷'],
    ]
  })
  //点击图标
  function clickEmoji(item) {
    emit('emotion', item)
  }
</script>

<style lang="scss" scoped>
  .emojis {
    width: 100%;
    height: 360rpx;
    padding: 16rpx 0;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 100rpx;

    .emoji-line {
      width: 100%;
      display: flex;

      &-item {
        font-size: 40rpx;
        text-align: center;
        flex: 1;
        margin-bottom: 8rpx;
      }
    }
  }
</style>
